<template>
  <table class="ba-table">
      <tr>
          <td class="timg" rowspan="2">
              <el-avatar :src="user.img"></el-avatar>
          </td>
          <!-- 徽章显示，数据由爷组件传递而来 -->
          <td class="tname">{{user.name}}
            <img :src='show' class="ticon" >
          </td>
          <td> </td>
          <td> </td>
          <td class="tcloth" rowspan="2">
              <img :src="user.cloth1" alt="衣服一">
          </td>
          <td class="tplus" rowspan="2">+</td>
          <td class="tcloth" rowspan="2">
              <img :src="user.cloth2" alt="衣服二">
          </td>
      </tr>
      <tr>
          <!-- 浏览问题时显示为累计收入 -->
          <!-- 问题详情时显示为学校学院 -->
          <td class="tsub" colspan="2" v-show="!isContent">
            (累计收入：<span>{{user.come}}</span>元）
          </td>
          <td class="tsub" colspan="2" v-show="isContent">
              <i class="el-icon-location-information"
                style="margin-top:5px;"></i>
              {{user.university}}
          </td>
          <td class="ttitle" rowspan="2">{{user.title}}</td>
      </tr>
  </table>
</template>

<script>
export default {
  props: [
    'show',
    'isContent'
  ],
  data () {
    return {
      user: {
        id: 1,
        img: require('@/assets/images/Main/Me/user.jpg'),
        name: '用户名',
        come: '20.98',
        title: '搭配',
        cloth1: require('@/assets/images/Main/Content/Cloth.jpg'),
        cloth2: require('@/assets/images/Main/Content/Cloth.jpg'),
        university: '中国矿业大学'
      }
    }
  },
  watch: {
    // isContent (newVal) {
    //   if (newVal) {
    //     this.isChange = true
    //   }
    // }
  }
}
</script>

<style lang='scss'>
.LOCAL {
    margin-top: 5%;
    font-size: 12px;
    font-weight: bold;
    color: gray;
    padding-bottom: 5px;
    border-bottom: 2PX solid lavender;
}
.ba-table {
    // border: 1px solid red;
    // tr {
    //     border: 1px solid red;
    //     td {
    //         border: 1px solid red;
    //     }
    // }
    margin-top: -20px;
    width: 100%;
    height: auto;
    font-size: 14px;
    font-family: 微软雅黑;
    font-weight: bold;
    .timg {
        width: 15%;
        text-align: center;
        padding-top: 20px;
    }
    .tname {
        height: 30px;
        vertical-align: middle;
        padding-top: 10px;
        font-size: 16px;
    }
    .tsub {
        width: 35%;
        padding-bottom: 20px;
        font-size: 12px;
        font-size: normal;
        color: DarkKhaki;
        span {
            font-weight: bold;
        }
    }
    .ticon {
        width: 20px;
        height: auto;
        padding-top: 30px;
        margin-left: 20px;
    }
    .ttitle {
        padding-bottom: 20px;
        width: 10%;
    }
    .tcloth {
      img {
        width: 100%;
        padding-top: 10px;
        height: auto;
      }
    }
    .tplus {
        text-align: center;
        font-weight: bold;
        padding-bottom: 20px;
        vertical-align: bottom;
    }
}
</style>
